<template>
  <view>
    <nut-searchbar v-model="searchValue" placeholder="请输入姓名/企业名">
      <template v-slot:rightin>
        <Search2 />
      </template>
    </nut-searchbar>
    <view class="main">
      <view class="enterpriseItem">
        <view class="persionTop">
          <view style="display: flex">
            <view class="persionHead">
              <image
                src="../../assets/images/invoicing/user1.png"
                class="perision_img"
              />
            </view>
            <p>福州天物信息科技有限公司</p>
          </view>
          <view class="invoicing_persion_Title"> 专票抬头 </view>
        </view>
        <view class="persionMid">
          <view class="midItem"
            ><view class="midTitle">税号</view><view>9133011076968935A</view>
          </view>
          <view class="midItem"
            ><view class="midTitle">开户银行</view><view>福州水部支行</view>
          </view>
          <view class="midItem"
            ><view class="midTitle">银行账户</view><view>3178098712009999</view>
          </view>
          <view class="midItem"
            ><view class="midTitle">企业地址</view><view>福州市鼓楼区凤翔大第</view>
          </view>
          <view class="midItem"
            ><view class="midTitle">企业电话</view><view>0591-68900000</view>
          </view>
        </view>
        <view class="persionBot">
          <!-- <nut-radio label="1" v-model="choosed">设为默认抬头</nut-radio> -->
          <nut-checkbox v-model="choosed" label="1">设为默认抬头</nut-checkbox>
          <view class="operateBox">
            <view style="display: flex; margin-right: 10px"
              ><Edit class="botIcon" />
              <p>编辑</p></view
            >
            <view style="display: flex"
              ><Del2 class="botIcon" />
              <p>删除</p></view
            >
          </view>
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <view class="bottomBox">
        <nut-button type="info" class="botBtn" @click="gotoAddSpecial">新增专票抬头</nut-button>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from "vue";
import { Search2, Del2, Edit } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";

const searchValue = ref();
const choosed = ref<boolean>(false);
function gotoAddSpecial(){
 Taro.navigateTo({
    url: '/pages/invoicing/addSpecial'
  })
}
</script>
<style lang="scss">
.main {
  height: 100%;
  background: #f5f5f5;
  box-sizing: border-box;
  padding: 0 24rpx;
  padding-top: 1rpx !important;
  
  .enterpriseItem {
    margin-top: 24rpx;
    height: 412rpx;
    width: 100%;
    background: linear-gradient(107deg, #cce0ff 0%, #ffffff 99%);
    border-radius: 16rpx;
    .persionTop {
      display: flex;
      justify-content: space-between;
      height: 128rpx;
      box-sizing: border-box;
      padding: 40rpx;
      .invoicing_persion_Title {
        width: 112rpx;
        height: 36rpx;
        border-radius: 20rpx;
        color: #0ec365;
        font-size: 22rpx;
        line-height: 36rpx;
        text-align: center;
        background: rgba(9, 102, 255, 0.16);
      }
      .persionHead {
        width: 64rpx;
        height: 64rpx;
        border-radius: 16rpx;
        background: #ffffff;
        box-sizing: border-box;
        padding: 8rpx;
        .perision_img {
          height: 100%;
          width: 100%;
        }
      }
      p {
        width: 300rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 32rpx;
        line-height: 48rpx;
        margin-left: 16rpx;
      }
    }
    .persionMid {
      height: 204rpx;
      .midItem {
        height: 36rpx;
        display: flex;
        font-size: 22rpx;
        line-height: 36rpx;
        color: #666666;
        box-sizing: border-box;
        padding-left: 112rpx;
        .midTitle {
          width: 120rpx;
        }
      }
    }
    .persionBot {
      display: flex;
      justify-content: space-between;
      height: 80rpx;
      background: #ffffff;
      padding: 0 20rpx;
      .operateBox {
        color: #666666;
        line-height: 80rpx;
        display: flex;
        box-sizing: border-box;
        .botIcon {
          margin-top: 20rpx;
        }
      }
    }
  }
}
.bottomBox{
    position: fixed;
    background: white;

    bottom: 0;
    height: 128rpx;
    padding: 20rpx;
    box-sizing: border-box;
    border-top: 2rpx solid #F5F5F5;
    .botBtn{
        width: 700rpx;
        margin: 0 auto;
    }
}
</style>
